<template>
	<view class="view-player">
		<video id="myVideo" class="video" :src="video.src" controls="false" loop="true" @click="doClick" :autoplay="auto"></video>
	</view>
</template>

<script>
	let timer = null;
	export default {
		data() {
			return {
				auto: false, // 是否自动播放
				isPlay: false, // 当前视频是否在播放中，默认为false
				clickCount: 0 // 记录当前用户点击次数，默认为0
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo", this); // 获取video上下文对象
		},
		props: ['video','index'],
		created(){
			this.autoplay()
		},
		methods: {
			autoplay(){
				if(this.index === 0){
					this.auto = true
				}
			},
			play() {
				this.videoContext.play();
				this.isPlay = true;
			},
			pause() {
				this.videoContext.pause();
				this.isPlay = false;
			},
			playFromHead() { // 跳转到开始位置并播放
				this.videoContext.seek(0);
				this.play();
				this.isPlay = true;
			},
			doClick() {
				if (timer) {
					clearTimeout(timer);
				}
				this.clickCount++;
				timer = setTimeout(() => {
					if (this.clickCount >= 2) {
						console.log("双击")
						 this.$emit("follow");
					} else {
						console.log("单击")
						if (this.isPlay) {
							this.pause();
						} else {
							this.play();
						}
					}
					this.clickCount = 0;
				}, 300)
			}
		}
	}
</script>

<style scoped>
	.view-player {
		width: 100%;
		height: 100%;
	}

	.video {
		width: 100%;
		height: 100%;
		z-index: 19;
	}
</style>
